/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  Image,
  Modal
} from 'react-native';

import style from './style'
import codePush from 'react-native-code-push';
import withRef from './withRef'

@codePush
@withRef
export default class CodePushView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      syncMessage: '',
      progress: false,
      mode: 'dialog',//展示方式 'dialog','default',
    };
  }
  static defaultProps = {

  }
  componentDidMount() {

  }
  //手动更新
  start() {
    this.codePushStart()
    this.setState({
      mode: 'default'
    })
  }
  
  startWithDialog() {
    this.codePushStart()
    this.setState({
      mode: 'dialog'
    })
  }
  codePushStart() {
    codePush.sync(
      {
        updateDialog: {
          mandatoryUpdateMessage: '有必须安装的更新可用',
          optionalIgnoreButtonLabel: '忽略',
          optionalInstallButtonLabel: '安装',
          optionalUpdateMessage: '有可用的更新，您要安装吗',
          title: '更新',
          mandatoryContinueButtonLabel: '继续',
        },
        installMode: codePush.InstallMode.IMMEDIATE,
      },
      this.codePushStatusDidChange.bind(this),
      this.codePushDownloadDidProgress.bind(this),
    );
  }
  //进度
  codePushDownloadDidProgress(progress) {
    this.setState({ progress });
  }

  // 监听更新状态
  codePushStatusDidChange(syncStatus) {
    switch (syncStatus) {
      case codePush.SyncStatus.CHECKING_FOR_UPDATE:
        this.setState({ syncMessage: '检查更新中' });
        break;
      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        this.setState({ syncMessage: '下载更新包中' });
        break;
      case codePush.SyncStatus.AWAITING_USER_ACTION:
        this.setState({ syncMessage: '等待用户操作' });
        break;
      case codePush.SyncStatus.INSTALLING_UPDATE:
        this.setState({ syncMessage: '安装更新中' });
        break;
      case codePush.SyncStatus.UP_TO_DATE:
        this.setState({ syncMessage: '当前已是最新版本', progress: false });
        break;
      case codePush.SyncStatus.UPDATE_IGNORED:
        this.setState({
          syncMessage: '用户取消更新',
          progress: false,
        });
        break;
      case codePush.SyncStatus.UPDATE_INSTALLED:
        this.setState({
          syncMessage: '更新安装完成，下次启动生效',
          progress: false,
        });
        break;
      case codePush.SyncStatus.UNKNOWN_ERROR:
        this.setState({
          syncMessage: '未知错误',
          progress: false,
        });
        break;
    }
  }

  render() {
    let { progress, syncMessage, mode } = this.state

    let { } = this.props

    return (
      mode == 'dialog' ?
        //弹窗展示
        
        <Modal
          animationType="fade"
          transparent={true}
          visible={progress}
          onRequestClose={() => {

          }}
        >
          <View style={style.codepushPopup}>
            {progress &&

              <View style={style.progressBgline}>
                <View style={[style.progressBlueline, { width: `${(progress.receivedBytes / progress.totalBytes) * 100}%` }]}></View>
              </View>


            }
            <Text style={ style.messagetxt }>{syncMessage || ''}</Text>
          </View>
        </Modal>
          :
          //默认展示
      <View style={style.codepushWrapper}>
        {progress &&

          <View style={style.progressBgline}>
            <View style={[style.progressBlueline, { width: `${(progress.receivedBytes / progress.totalBytes) * 100}%` }]}></View>
          </View>


        }
        <Text style={ style.messagetxt }>{syncMessage || ''}</Text>
      </View>

          );
        }
      }
      
      
      
      
